import React, { memo, useState, useEffect } from "react";
// import { useSelector, shallowEqual, useDispatch } from "react-redux";
// import { getDetailsAction } from '../home/store/actionCreators'
import { findWorksOne } from '../../services/home'
import css from './css.module.scss'
import { IMGURL } from '../../services/config'
import { worksVote } from '../../services/home'
import { message } from 'antd';
import { scrollTo } from "../../utils/scrollTo";
export default memo(function WorksDetails(props) {
    scrollTo(0, 800);
    const { search } = props.location
    let worksId = search.split('?')[1]
    // worksId = worksId.split('=')[1]
    const [worksDetails, setWorksDetails] = useState({})
    useEffect(() => {
        findWorksOne({ worksId: worksId }).then(res => {
            setWorksDetails(res.data)
        })
    }, [worksId]);



    const handVote = () => {
        worksVote({ customizeId: 2, worksId: worksId }).then(res => {
            message.success(res.data.content)
        })
    }
    return (
        <div className='w ptb60'>
            <div className={css.works_details}>
                <div className={css.left_box}>
                    <div className={css.title}>
                        {worksDetails.worksTitle}
                    </div>
                    <div className='rech_text' dangerouslySetInnerHTML={{ __html: worksDetails.worksContent }}>
                    </div>
                    {/* <img style={{ maxWidth: '100%', marginTop: '20px', marginBottom: '60px' }} src={worksDetails.listImage ? IMGURL + worksDetails.listImage : ''} alt="" /> */}
                    <div className={css.modul_box}>
                        <div className={css.dodul_title}>
                            {worksDetails.modelName1}
                        </div>
                        <div className={css.dodul_content}>
                            <div className='rech_text' dangerouslySetInnerHTML={{ __html: worksDetails.modelContent1 }}>
                            </div>
                        </div>
                    </div>
                    <div className={css.modul_box}>
                        <div className={css.dodul_title}>
                            {worksDetails.modelName2}
                        </div>
                        <div className={css.dodul_content}>
                            <div className='rech_text' dangerouslySetInnerHTML={{ __html: worksDetails.modelContent2 }}>
                            </div>
                        </div>
                    </div>

                </div>
                <div className={css.right_box}>
                    <div className={css.head_box}>
                        <img className={css.picture} src={worksDetails.picture ? IMGURL + worksDetails.picture : ''} alt="" />
                        <div className={css.title}>
                            {worksDetails.author}
                        </div>
                        <div className={css.content}>
                            {worksDetails.company}
                        </div>
                        <div className={css.content}>
                            {worksDetails.position}
                        </div>
                    </div>
                    <div className='rech_text' dangerouslySetInnerHTML={{ __html: worksDetails.introduction }}>
                    </div>
                    <div className={css.btn} onClick={e => handVote()}>
                        投票
                    </div>
                </div>
            </div>

        </div>
    );
});
